这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

  • Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
  • 需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
  • 迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 ​

  • 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
  • 文中保留了 5 个导出图片资源，适合和文字步骤一起对照查看。
  • 涉及环境变量的示例只保留命名和加载方式，真实密钥、token 和本地配置应放在未提交的本地文件或 CI 密钥变量中。

Ant Design Vue Por 开发配置

https://segmentfault.com/a/1190000015133974 参照地址

1、开发版和生产版本配置

A、cli-3.0总共提供了四种方式来制定环境变量：

  1. 在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。

  2. 在根目录添加.env.local 文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。

  3. 在根目录添加.env.[mode] 文件，配置对应某个模式下的配置,比如：.env.development来配置开发环境的配置。

  4. 在根目录添加.env.[mode].local文件，配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效，该文件不会被git跟踪。

在文件中，我们只需要以key=value的方式就可以设置变量了。

例如：

FOO=bar VUE_APP_SECRET=secret

2、环境变量的使用

设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用，限制也不一样。

  1. 在项目中，也就是src中使用环境变量的话，必须以VUE_APP_开头。例如我们可以在main.js中直接输出：console.log(process.env.VUE_APP_SECRET)

  2. 在webpack配置中使用，没什么限制，可以直接通过process.env.XXX来使用

  3. 在public/index.html中使用的：分三类：（没怎么用过）

    <%= VAR %> 用于非转换插值 例如：<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico"> <%- VAR %> 用于HTML转义插值 <% expression %> 用于JavaScript控制流

模式

模式是Vue CLI项目中的一个重要概念。默认情况下，Vue CLI项目中有三种模式：

  1. development：在vue-cli-service serve下，即开发环境使用

  2. production：在vue-cli-service build 和vue-cli-service test:e2e下，即正式环境使用

  3. test： 在vue-cli-service test:unit下使用

另外，如果你想要修改模式下默认的环境变量的话可以通过--mode来实现，例如：

"dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了，为什么需要有模式的存在，这里我没查到详细的文档，个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同，在development自动注入devtoolPlugin插件，利于开发，而在production中检测到错误不会进行console。

举例

说完了概念，可能还是比较模糊，可以试着添加一个stage环境，用来模拟预上线。

首先在package.json添加一种类型，并修改默认环境变量为stage环境变量

在根目录下创建.env.stage文件，来声明变量：

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量，outputDir为除数打包后文件的地址。

在vue.config.js中使用环境变量，制定输出文件为环境变量配置的文件：

最后执行命令yarn stage能看到根目录下生成了stage文件：

这样我们就配置完了stage环境。详细的项目地址可以参考：以vue-cli3.0为基础，结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

实践检查清单 &#8203;

  • 先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
  • 涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
  • 不要把真实 token、密码、私钥或本地 .env.local 提交到仓库。
  • 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。
  • 涉及接口、服务端或权限逻辑时，补充失败分支和权限边界测试。

复盘小结 &#8203;

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。